
<template>
    <div class="error-page">
        <div class="error-code" :class="{ glitchEffect: isGlitch }">403</div>
        <h1>对不起，您没有权限访问此页面。</h1>
        <p class="message">
            这可能是因为您尝试访问的页面需要特定的权限或认证。
        </p>
        <button class="btn-home" @click="redirectToHome">返回首页</button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isGlitch = ref(false);

// 模拟加载完成后激活glitch效果
onMounted(() => {
    setTimeout(() => {
        isGlitch.value = true;
    }, 1000);
});

function redirectToHome() {
    // 根据实际情况替换为你的路由跳转逻辑
    window.location.href = '/';
}

</script>

<style scoped>
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f4f9;
}

.error-code {
    font-size: 200px;
    font-weight: bold;
    color: #6c757d;
    transition: all 0.3s ease-in-out;
}

.error-code.glitchEffect {
    animation: glitch-effect 2s infinite linear alternate;
}

@keyframes glitch-effect {
    0%, 100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%);
    }
}

.message {
    color: #333;
    font-size: 24px;
    margin-top: 20px;
}

.btn-home {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-home:hover {
    background-color: #0056b3;
}
</style>